<template>
  <v-container>
    <v-toolbar flat color="white">
      <v-toolbar-title>历史收费</v-toolbar-title>
    </v-toolbar>
    <v-divider></v-divider>
    <v-data-table
      :headers="headers"
      :items="desserts"
      class="elevation-1"
      :rows-per-page-items="[5]"
    >
      <template slot="items" slot-scope="props">
        <td>{{ props.item.serialno }}</td>
        <td class="text-xs-left">{{ props.item.camerano }}</td>
        <td class="text-xs-left">{{ props.item.parkingno }}</td>
        <td class="text-xs-left">{{ props.item.date|toDate }}</td>
        <td class="text-xs-left">{{ props.item.fee }}￥</td>
      </template>
    </v-data-table>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      headers: [
        {
          text: "序号",
          align: "left",
          sortable: true,
          value: "serialno"
        },
        { text: "摄像头编号", value: "camerano" },
        { text: "车位号", value: "parkingno" },
        { text: "日期", value: "date" },
        { text: "收费记录", value: "fees" }
      ],
      desserts: [
        {
          serialno: 1,
          camerano: 2,
          parkingno: 1,
          date: Date.now(),
          fee: 1325
        }
      ]
    };
  },

  filters: {
    toDate(timestamp) {
      return new Date(timestamp).toLocaleString()
    }
  }
};
</script>
